<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+44+'px'}"></view>
			<u-navbar @leftClick="$nav(2)" title="提交订单">
			</u-navbar>
		</view>
		
		<view v-if="!(pack.goods_type == 3)" class="dis_felx" @click="pop_show">
			<u-icon name="map" color="#767676" style="margin-left: 15rpx;"></u-icon>
			<view class="felx_2">
				<view class="address_name">
					<text>{{add_default.consignee_name ? add_default.consignee_name: '请选择收货地址'}}</text>
					<text>{{add_default.consignee_mobile}}</text>
				</view>
				<view>{{add_default.area_path ? add_default.area_path : ''}}{{add_default.detail_address ? add_default.detail_address : ''}}</view>
			</view>
			<view class="felx_3">
				<u-icon name="arrow-right" color="#848484"></u-icon>
			</view>
		</view>
		
	    <view class="commodity_cont">
		
			<image :src="pack.image"></image>
			<view>
				<view class="commodity_tit">
					{{pack.name}}
				</view>
				<view class="commodity_sel">已选：<text
						v-for="(item,i) in pack.sku_name" :key="i">{{item}}</text></view>
				<view class="commodity_price">
					<text>¥{{pack.sell_price}}</text>
					<text>x{{pack.order_number}}</text>
				</view>
			</view>
		</view>
		
		<view class="pay-m">
			<view>支付方式</view>
			<view>在线支付</view>
		</view>
		
		<view class="remark">
			<text>备注</text>
			<u-input v-model="remark" placeholder="商品备注" border="false"/>
		</view>
		
		<view class="goods-view">
			<view class="flex-row justify-between">
				<text>商品数量</text>
				<text>{{pack.order_number}}</text>
			</view>
			<view class="flex-row justify-between" style="margin-top: 18rpx;">
				<text>商品总价</text>
				<text>¥{{goodsAllPrice(pack)}}</text>
			</view>
			
			<view class="flex-row justify-between" style="margin-top: 18rpx;">
				<text>配送方式</text>
				<text>{{ pack.goods_type == 3 ? '虚拟商品无需配送' : deliveryMethod(pack) }}</text>
			</view>
			<view v-if="pack.goods_type == 1" class="flex-row justify-between" style="margin-top: 18rpx;">
				<text>配送费用</text>
				<text>¥{{ fee }}</text>
			</view>
		</view>
		
		<view class="bottom-lay">
			<view class="flex-row justify-between items-center bt-item">
				
				<view class="flex-row" style="margin-left: 20rpx;">
					<text>总额：</text>
					<text style="font-size: 35rpx;color: #5c8edc">¥{{allPrice(pack)}}</text>
				</view>
				
				<view class="bottom-btn" @click="toPay()">
					提交订单
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pack: {},
				remark:'',
				add_default: {},
				fee:''
			};
		},
		onLoad(op) {
			this.pack = JSON.parse(decodeURIComponent(op.pack))
			
			console.log(this.pack);
			// if(this.pack.discount>0){
			// 	this.pack.sell_price=(Number(this.pack.sell_price)*(this.pack.discount/10)).toFixed(2)
			// }
			this.getDefaultAddress();
			
			this.getShipFee();
		},
		onShow() {
			let that = this
			uni.$once('isRefresh',function(data){
				
				that.add_default = data;
				
				console.log("新："+that.add_default);
				
			})
		},
		computed:{
			statusBarHeight() {
				return this.$store.state.statusBarHeight
			}
		},
		methods:{
			getShipFee(){
				this.$request({
					url:'?c=Order&a=queryShippingFee',
					type:'post',
					data:{
						sku_id:this.pack.sku_id,
						order_number:this.pack.order_number
					}
				}).then(res =>{
					// console.log(res);
					this.fee = res.data;
				})
			},
			
			allPrice(p){
				// Number(pack.sell_price)*Number(pack.order_number).toFixed(2)
				
				return ((Number(p.sell_price) * Number(p.order_number)) + Number(this.fee)).toFixed(2)
				
				// if(p.free_shipping == 0){
				// 	return ((Number(p.sell_price) * Number(p.order_number)) + Number(p.fixed_shipping_fee)).toFixed(2)
				// }else{
				// 	return  Number(p.sell_price) * Number(p.order_number).toFixed(2)
				// }
				
			},
			goodsAllPrice(p){
				return Number(p.sell_price) * Number(p.order_number).toFixed(2)
			},
			
			// deliveryFee(p){
			// 	if(p.free_shipping == 0){
			// 		return '¥'+p.fixed_shipping_fee
			// 	}else{
			// 		return '包邮'
			// 	}
			// },
			deliveryMethod(p){
				if(p.shipping_method == 1){
					return '物流'
				}else if(p.shipping_method == 2){
					return '自提'
				}else if(p.shipping_method == 3){
					return '配送'
				}else if(p.shipping_method == 4){
					return '无需配送'
				}
			},
			
			pop_show(){
				uni.navigateTo({
					url:'/pages/mine/address/address'
				})
			},
			getDefaultAddress(){
				this.$request({
					url:'?c=User&a=defaultAddress',
					type:'post'
				}).then(res =>{
					this.add_default = res.data;
				})
			},
			
			toPay(){
				if(this.pack.goods_type == 3){
					this.pack.goType = 1;
					this.pack.remark = this.remark;
					this.pack.fee = this.fee;
					let p = JSON.stringify(this.pack)
					uni.navigateTo({
						url:'/pages/order_allocation/order_pay?pack='+p
					})
				}else{
					if(this.add_default){
						this.pack.address_id = this.add_default.id;
						this.pack.goType = 1;
						this.pack.remark = this.remark;
						this.pack.fee = this.fee;
						let p = JSON.stringify(this.pack)
						uni.navigateTo({
							url:'/pages/order_allocation/order_pay?pack='+p
						})
					}else{
						this.$u.toast('请添加收货地址');
					}
				}
				
				
				
				
				
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.dis_felx {
	align-items: center;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 35rpx;
}

	.felx_2 {
		line-height: 40rpx;
		width: 70%;
		font-size: 26rpx;
		font-weight: 400;
	}

	.felx_3 {
		display: flex;
		justify-content: flex-end;
		width: 10%;
	}
	.address_name>text:first-child {
		font-size: 28rpx;
	}
	
	.address_name>text:last-child {
		padding-left: 20rpx;
		color: #000;
	}
	.pay-m{
		margin-top: 15rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 28rpx;
	}
	.remark {
		padding: 25rpx;
		display: flex;
		margin-top: 15rpx;
		background-color: #fff;
		font-size: 28rpx;
		align-items: center;
	
		>text:first-child {
			font-weight: 400;
			color: black;
			margin-right: 40rpx;
		}
	}
	.goods-view{
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		font-size: 28rpx;
		margin-top: 15rpx;
		background-color: #fff;
		margin-bottom: 160rpx;
	}
	.bottom-lay{
		position: fixed;
		left: 0;
		bottom: 0;
		height: 150rpx;
		// line-height: 90rpx;
		width: 100%;
		text-align: center;
		background-color: #fff;
		
	}
	.bottom-btn{
		border-radius: 45rpx;
		background-color: #5c8edc;
		padding: 15rpx 40rpx;
		// height: 60rpx;
		margin-right: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}
	.bt-item{
		display: flex;
		height: 100rpx;
		
	}
	.commodity_cont {
		display: flex;
		justify-content: space-between;
		// margin: 20rpx 0;
		margin-top: 15rpx;
		background-color: #fff;
		padding: 25rpx;
		image {
			width: 170rpx;
			height: 170rpx;
	
			border-radius: 20rpx;
		}
	
		>view {
			width: calc(100% - 190rpx);
	
		}
	}
	.commodity_sel {
		color: #939393;
		padding: 10rpx 0;
	}
	
	.commodity_tit {
		color: black;
		font-weight: 400;
		width: 100%;
		overflow: hidden; //超出文本隐藏
	
		text-overflow: ellipsis; ///超出部分省略号显示
	
		display: -webkit-box; //弹性盒模型
	
		-webkit-box-orient: vertical; //上下垂直
	
		-webkit-line-clamp: 2; //自定义行数
	}
	.commodity_price {
		display: flex;
		justify-content: space-between;
	
		>text:first-child {
			font-weight: bold;
			color: #d6000f;
		}
	
		>text:last-child {
	
			color: #676767;
		}
	}
</style>
